<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>罗依含的网页</title>
	<style>
.con {
    position: relative;
}
.nav > li {
    display: inline;
    float:left;
}
.nav li a {
    color: #FFFF0F;
    display: block;
    line-height: 20px;
    padding: 15px 30px 15px 160px;
}
.con:hover {
    cursor: pointer;
}
.con:hover .con-box{
     transform: translateZ(-25px) rotateX(90deg);
}
.con-box {
     transition: all .3s ease-out;
    transform: translatez(-25px);
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.cont {
    transform: rotatex(0deg) translatez(25px);
}
.back {
    transform: rotatex(-90deg) translatez(25px);
    color: #BD06DE;
}
.cont, .back {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background:#727ba8;  
    padding: 15px 30px 15px 31px;
    color: rgb(0, 0, 0);
    box-sizing: border-box;
}
.nav li a:hover .cont,  
.nav li a:hover .back {
    background-color:#4A6DC0;
}

		.hero {
    position: relative;
}

		.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    *zoom: 1;
}
		
		.container:after {
    content: " ";
    clear: both;
    display: block;
    overflow: hidden;
    height: 0;
}

.button, form input[type="submit"], form button, form input[type="reset"] {
    display: inline-block;
    background: #ecb540;
    background: -webkit-linear-gradient(#FFF65B, #ec8940);
    background: linear-gradient(#FFF65B, #ec8940);
    border-bottom: 1px solid #e26d17;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    padding: 10px 25px;
    border-radius: 30px;
    color: #86450c;
}
a {
    text-decoration: none;
    color: #4a3173;
}
		
a {
    background: transparent;
}

*, *:before, *:after {
    box-sizing: border-box;
}


.text-center {
    text-align: center;
}
		
body {				
	background-image: url("image/小熊.jpg");	
	background-size: 100%;
    color: #605555;
    font-family: "Belgrano", "Roboto Slab", sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
	margin: 0;
	display: block;
}
	</style>
	
</head>

<body>
	
	<div class="hero">
		<div class="container">
<!--		<div class="text-center">-->
			<span style="top:100px;position: absolute;">
			<a href="323.html" class="button">返回寝室主页</a></span>
<!--		</div>-->
		</div>
	</div>
	
<span style="text-align: center">	
	<div>
		<ul class="nav">
    		<li><a href="index.html" class="con"> 0000 <span class="con-box"><span class="cont">个人首页</span><span class="back"><span style="font-size: 21px">Let's go back!</span></span>
    </span> </a></li>
    <li><a href="个人简介.html" class="con"> 1111 <span class="con-box"><span class="cont">个人简介</span><span class="back"><span style="font-size: 21px">个人简介</span></span></span> </a></li>
    <li><a href="我的家乡.html" class="con"> 1111 <span class="con-box"><span class="cont">我的家乡</span><span class="back"><span style="font-size: 21px">新疆</span></span></span> </a></li>
    <li><a href="我的爱好.html" class="con"> 1111 <span class="con-box"><span class="cont">我的爱好</span><span class="back"><span style="font-size: 21px">跳舞</span></span></span> </a></li>
    <li><a href="我的榜样.html" class="con"> 1111 <span class="con-box"><span class="cont">我的榜样</span><span class="back"><span style="font-size: 21px">袁隆平</span></span></span> </a></li>
  </ul>
</div>
</span>	
	
<span style="top: 280px;font-size: 80px;left: 250px;position: absolute;text-align: center;color: rgb(255, 255, 255);font-family: 华文新魏">
	欢迎来到我的主页！<br><br>
	我是CS2206罗依含！
</span>
	
</body>
</html>
